<template>
  <div class="warn">
    <van-tabs v-model:active="active" @change="onChange">
      <van-tab v-for="item in tabList" :title="item.label" :key="item.value"> </van-tab>
    </van-tabs>
    <div class="warn_msg">
      <List :request="_request" ref="listRef">
        <template #item="{ data }">
          <!-- <span>111</span> -->
          <div class="warn_msg_item" @click="goToDetail(data)">
            <div class="warn_msg_info">{{ alarmTypeEnum[data.alarmType] || '-' }}</div>
            <div class="warn_msg_content">
              <div class="msg">
                {{ (data.pointName || '') + '触发' + alarmTypeEnum[data.alarmType] }}
              </div>
              <div class="date">{{ data.alarmTime || '-' }}</div>
            </div>
            <div class="warn_msg_icon" v-if="data.handleState == 0 && data.alarmType == 1">
              待处理
            </div>
          </div>
        </template>
      </List>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { ref, onActivated } from 'vue'
import List from '@/components/list/index.vue'
import { getAlarmList } from '@/api/warn'
const alarmTypeEnum: any = {
  1: '设备告警',
  2: '测点告警',
  3: '区域告警',
  4: '地震告警',
}
const listRef = ref()
const _request = async (params: any) => {
  if (active.value != '0') {
    params.alarmType = active.value
  }
  return await getAlarmList(params)
}
const active = ref('0')
const tabList = [
  {
    label: '全部',
    value: '0',
  },
  {
    label: '设备告警',
    value: '1',
  },
  {
    label: '测点告警',
    value: '2',
  },
  {
    label: '区域告警',
    value: '3',
  },
  {
    label: '地震告警',
    value: '4',
  },
]

const onChange = () => {
  listRef.value.refresh()
}
const goToDetail = (item: any) => {
  router.push({
    path: '/warn_detail',
    query: item,
  })
}

onActivated(() => {
  listRef.value.refresh()
})
</script>

<style lang="scss" scoped>
@mixin getStyle($size, $color, $margin) {
  font-size: $size;
  color: $color;
  margin-bottom: $margin;
}
.msg {
  font-weight: 700;
  @include getStyle(32px, #252628, 14px);
  width: 400px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.date {
  @include getStyle(28px, #5b5c5c, 0);
}
.warn {
  background: #f5f5f5;
  min-height: 100%;
  &_msg {
    padding: 30px 30px 150px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    &_item {
      position: relative;
      display: flex;
      align-items: center;
      padding: 25px 30px;
      border-radius: 12px;
      background-color: #fff;
      margin-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    &_info {
      @include getStyle(32px, #5f777b, 0);
      font-weight: 700;
      width: 90px;
      height: 76px;
      padding-right: 24px;
      border-right: 1px solid #a3a3a3;
    }
    &_content {
      padding-left: 24px;
    }
    &_icon {
      @include getStyle(26px, #ff5454, 0);
      width: 120px;
      height: 36px;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      background: url('@/assets/images/process.png') no-repeat;
      background-size: 100%;
      background-position: center;
    }
  }
}
</style>
